<template>
  <el-container>
    <el-main style="padding: 0">
      <!--  左右布局-->
      <el-row justify="center" align="middle" style="height: 100%">
        <el-col :span="12" class="left-back">
          <!-- 左部分为标识-->
          <el-row>
            <el-col :span="6">
              <h3>大气污染监测系统</h3>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" :offset="6" :pull="3">
          <h2>欢迎使用本系统</h2>
          <!-- 右部分为表单-->
          <el-form v-if="type==0" ref="formElement" :model="form" label-width="80px" :label-position="'top'"
                   :rules="rules">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-row justify="space-evenly" class="width-100">
                <el-col :span="12">
                  <el-input v-model="form.code"></el-input>
                </el-col>
                <el-col :span="12" class="text-end">
                  <el-button type="primary" @click="send" :disabled="codeTimer!=null">{{ codeText }}</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-button type="primary" class="width-100" @click="loginUser">登录</el-button>
          </el-form>
          <el-form v-if="type==1" ref="registerFormElement" :model="registerForm" label-width="80px"
                   :label-position="'top'"
                   :rules="rule">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="registerForm.email"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-row justify="space-evenly" class="width-100">
                <el-col :span="12">
                  <el-input v-model="registerForm.code"></el-input>
                </el-col>
                <el-col :span="12" class="text-end">
                  <el-button type="primary" @click="registerUserSend" :disabled="codeTimer!=null">{{
                      codeText
                    }}
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="昵称" prop="userName">
              <el-input v-model="registerForm.userName"></el-input>
            </el-form-item>
            <el-button type="primary" class="width-100" @click="registerUser">注册</el-button>
          </el-form>
          <div v-if="type==0" class="bottom-right">
            <el-link @click="type=1" class="float-right" href="#">
              <el-text type="primary" size="small">去注册</el-text>
            </el-link>
            <el-text class="float-right" size="small">还没有账号?</el-text>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script setup lang="ts">
import {onBeforeMount, ref} from "vue";
import {FormInstance, FormRules} from "element-plus";
import {getToken, login, loginSend, register, registerSend, saveToken} from "@/api/login.ts";
import router from "@/router/router.ts";

onBeforeMount(() => {
  let token = getToken();
  if (token.value != null) {
    router.push("/index")
    return
  }
})

const form = ref({
  email: "",
  code: ""
})
const registerForm = ref({
  email: "",
  code: "",
  userName: ""
})
const type = ref(0)
const codeTimer = ref(null)
const codeText = ref('获取验证码')
const formElement = ref<FormInstance>()
const registerFormElement = ref<FormInstance>()
const rules:FormRules = {
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur']}
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'blur'},
    {min: 5, max: 5, message: '验证码长度为5', trigger: 'blur'},
    {pattern: /^\S{5}$/, message: '不能包含空格', trigger: 'blur'}
  ]
}
const rule = {
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur']},
    {pattern: /^\S*$/, message: '不能包含空格', trigger: 'blur'}
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'blur'},
    {min: 5, max: 5, message: '验证码长度为5', trigger: 'blur'},
    {pattern: /^\S{5}$/, message: '不能包含空格', trigger: 'blur'}
  ],
  userName: [
    {required: true, message: '请输入昵称', trigger: 'blur'},
    {min: 1, max: 15, message: '昵称长度为1-15', trigger: 'blur'},
    {pattern: /^\S{1,15}$/, message: '昵称不能包含空格', trigger: 'blur'}
  ]
}

const send = () => {
  if (!/^\S+$/.test(form.value.email)) {
    ElMessage.error("请输入正确的邮箱地址")
    return
  }
  loginSend(form.value.email).then(() => {
    ElMessage.success('验证码发送成功')
    codeInterval()
  })
}

const loginUser = () => {
  login(form.value).then(res => {
    saveToken(res.data.data.token.tokenName, res.data.data.token.tokenValue)
  })
}

const registerUserSend = () => {
  if (!/^\S+$/.test(registerForm.value.email)) {
    ElMessage.error("请输入正确的邮箱地址")
    return
  }
  registerSend(registerForm.value.email).then(() => {
    ElMessage.success('验证码发送成功')
    codeInterval()
  })
}

const registerUser = () => {
  register(registerForm.value).then(res => {
    saveToken(res.data.data.token.tokenName, res.data.data.token.tokenValue)
  })
}

/**
 * 验证码定时器
 */
const codeInterval = () => {
  codeText.value = "60"
  codeTimer.value = setInterval(() => {
    if (codeText.value == "0") {
      clearInterval(codeTimer.value)
      codeText.value = "发送验证码"
      codeTimer.value = null
      return;
    }
    codeText.value = String(Number(codeText.value) - 1);
  }, 1000)
}

</script>
<style scoped>
.width-100 {
  width: 100%;
}

.left-back {
  background-image: url("@/assets/背景.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

.text-end {
  text-align: end;
}
</style>